<template>
  <el-col
    :span="6"
    class="inner-sidebar"
    ref="deploymentSidebar"
    :style="{ transform: sidebarCollapsed ? 'translate3D(-100%, 0, 0)' : '' }"
  >
    <CollapseButton v-model="sidebarCollapsed" />
    <div class="bg-white" style="height: calc(100vh - 58px)">
      <div class="px-5  py-3 flex items-center justify-between header">
          <slot name="header"></slot>
      </div>

      <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
        <slot>
        </slot>
      </el-scrollbar>

    </div>
  </el-col>
</template>

<script setup>
import CollapseButton from '../CollapseButton/index.vue'
import { defineComponent } from 'vue'
defineComponent({
  name: 'InnerSidebar'
})
const sidebarCollapsed = defineModel()
</script>

<style lang="scss" scoped>
.inner-sidebar {
  position: fixed;
  width: calc(25% - 62.5px);
  height: calc(-56px + 100vh);
  .header {
    @apply py-3 px-5 flex items-center justify-between sticky top-0 bg-white;
    border-bottom: var(--color-gray-4);
  }
}

:deep(.list) {
    padding-bottom: 65px;
    .item {
      @apply px-5 flex items-center justify-between border-b border-card-border-color  cursor-pointer h-[65px] bg-white;
      &:first-child {
        border-top: 1px solid var(--color-gray-4);
      }
      &:hover {
        background: var(--color-geekblue-1);
      }
      &.active {
       background: var(--color-geekblue-1);
       color: var(--color-blue-9);
      }
    }
  
}
</style>
